<template>
  <div>
    <el-card style="margin: 20px">
      <Subject @handleSearch ="handleSearch"></Subject>
      <el-tabs type="card" @tab-click="handleClick" v-model="activeName">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="已审核" name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
      </el-tabs>
      <el-alert
        title="数据一共9条"
        type="info"
        show-icon
        style="margin-top: 15px"
      >
      </el-alert>
      <!-- 表格 -->
      <el-table :data="data">
        <el-table-column label="试题编号" width="160px" prop="number">
        </el-table-column>
        <el-table-column label="学科" width="120px" prop="subject">
        </el-table-column>
        <el-table-column label="目录" width="120px" prop="catalog">
        </el-table-column>
        <el-table-column label="题型" width="120px" prop="questionType">
        </el-table-column>
        <el-table-column label="题干" width="250px" prop="question">
          <template #default="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="120px" prop="addDate">
        </el-table-column>
        <el-table-column label="难度" width="120px" prop="difficulty">
        </el-table-column>
        <el-table-column label="录入人" width="120px" prop="creator">
        </el-table-column>
        <el-table-column label="审核状态" width="120px" prop="chkState">
          <template #default="scope">
            {{
              scope.row.chkState == 0
                ? "待审核"
                : scope.row.chkState == 1
                ? "已审核"
                : "已拒绝"
            }}
          </template>
        </el-table-column>
        <el-table-column label="审核意见" width="120px" prop="chkRemarks">
        </el-table-column>
        <el-table-column label="审核人" width="120px" prop="chkUser">
        </el-table-column>
        <el-table-column label="发布状态" width="120px">
          <template #default="scope">
            {{
              scope.row.publishState == 0
                ? "待发布"
                : scope.row.publishState == 1
                ? "已发布"
                : "已下架"
            }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200px"
          align="center"
        >
          <template #default="scope">
            <el-button type="text" size="mini" @click="handelPerview(scope.row)">预览</el-button>
            <el-button type="text" size="mini" @click="handelshen(scope.row)" :disabled="scope.row.chkState===1">审核</el-button>
            <el-button type="text" size="mini" @click="handeledit(scope.row)" :disabled="scope.row.publishState===1">修改</el-button>
            <el-button type="text" size="mini" @click="handelup(scope.row)">{{scope.row.publishState !== 1 ?"上架" :'下架'}}</el-button>
            <el-button type="text" size="mini" @click="handelDelete(scope.row)" :disabled="scope.row.publishState===1">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <PaginAtion
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
        :counts="counts"
        :pagesize="params.pagesize"
      ></PaginAtion>
    </el-card>
    <Perview
      :perviewList="perviewList"
      @handelChange="handelChange"
      :outerVisible.sync="outerVisible"
      @testChange="testChange"
    ></Perview>
    <el-dialog title="题目审核" :visible.sync="dialogVisibles" width="30%">
      <el-radio-group v-model="checkList.chkState">
        <el-radio :label="1">通过</el-radio>
        <el-radio :label="2">拒绝</el-radio>
      </el-radio-group>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="checkList.chkRemarks"
        style="margin-top: 20px"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Subject from '@/components/Subject'
import { choice, detail, choiceCheck, choicePublish, remove } from '@/api/hmmm/questions'
import PaginAtion from '@/components/PaginAtion/index'
import Perview from '@/components/Perview/index'
export default {
  components: {
    Subject,
    PaginAtion,
    Perview
  },
  data () {
    return {
      outerVisible: false,
      dialogVisibles: false,
      activeName: 'first',
      textarea: '',
      data: [],
      params: {
        page: 1,
        pagesize: 10
      },
      checkList: {
        chkRemarks: '',
        chkState: 0,
        id: ''
      },
      formInline: {
        addDate: '',
        answer: '',
        catalog: '',
        catalogID: '',
        chkDate: '',
        chkRemarks: '3',
        chkState: 0,
        chkUser: null,
        city: '',
        creator: '',
        creatorID: '',
        difficulty: '',
        direction: '',
        enterprise: '',
        enterpriseID: '',
        id: '',
        number: '',
        publishState: 0,
        question: '',
        questionType: '',
        remarks: '',
        subject: '',
        subjectID: 1,
        tags: '',
        videoURL: ''
      },
      counts: 0,
      perviewList: {},
      radios: 3
    }
  },
  created () {
    this.choiceList()
  },
  methods: {
    // handleClick (tab, event) {
    //   console.log(tab, event)
    // },
    handleSizeChange (val) {
      this.params.pagesize = val
      this.choiceList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(val)
      this.params.page = val
      this.choiceList()
      console.log(`当前页: ${val}`)
    },
    async choiceList () {
      const res = await choice(this.params)
      console.log(res)
      this.data = res.data.items
      this.counts = res.data.counts
    },
    async handelPerview (row) {
      this.outerVisible = true
      const res = await detail(row)
      console.log(res)
      this.perviewList = res.data
      console.log(this.perviewList)
    },
    handelChange () {
      this.radio = 1
    },
    testChange (item) {
      if (item.isRight) {
      } else {
        item.isRight = true
      }
    },
    // 审核
    handelshen (row) {
      this.checkList.chkRemarks = row.chkRemarks
      this.checkList.chkState = row.chkState
      this.checkList.id = row.id
      console.log(this.checkList)
      this.dialogVisibles = true
    },
    // 审核按钮
    async save () {
      await choiceCheck(this.checkList)
      this.choiceList()
      this.checkList = {}
      this.dialogVisibles = false
    },
    // 判断四种状态
    handleClick () {
      switch (this.activeName) {
        case 'first':
          this.params.chkState = null
          this.choiceList()
          break
        case 'second':
          this.params.chkState = 0
          this.choiceList()
          break
        case 'third':
          this.params.chkState = 1
          this.choiceList()
          break
        case 'fourth':
          this.params.chkState = 2
          this.choiceList()
          break
      }
    },
    // 修改
    handeledit (row) {
      this.$router.push({
        path: 'new',
        query: {
          id: row.id,
          data: row
        }
      })
    },
    // 上架
    async handelup (row) {
      await this.$confirm('您确认上架这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      const res = await choicePublish({
        id: row.id,
        publishState: row.publishState === 1 ? 2 : 1
      })
      console.log(res)
      this.choiceList()
      this.$.success({
        type: 'success',
        message: '上架成功!'
      })
    },
    // 删除
    async handelDelete (id) {
      console.log(id)
      await this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      const res = await remove(id)
      console.log(res)
      this.$message({
        type: 'success',
        message: '成功删除用户!'
      })
      this.choiceList()
    },
    // 搜索
    async handleSearch (val) {
      for (const k in val) {
        if (val[k] === '') {
          delete val[k]
        }
      }
      console.log(val)
      this.params = { ...val }
      const res = await choice(this.params)
      console.log(res)
      this.data = res.data.items
      this.choiceList()
    }
  }
}
</script>

<style scoped lang="scss"></style>
